<template>
  <input data-test="newTodo" v-model="newTodo" />
  <button data-test="addTodo" @click="addTodo">addTodo</button>
  <ul class="todo-list">
    <li v-for="todo in todos">{{ todo.text }}</li>
  </ul>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
interface Todo {
  text: string;
}
const newTodo = ref('');
const todos = reactive<Array<Todo>>([]);
const addTodo = () => {
  todos.push({ text: newTodo.value });
  newTodo.value = '';
}
</script>
<style>
img {
  width: 50px;
}
</style>